<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="top">
        <!-- <div class="raining">
            <p>泵站</p>
        </div> -->
        <div class="pumpStation">赤石河引水工程泵站</div>
        <div class="yilei">
            <div class="yi-left">
                <span>一类</span>
                <span>泵站水质</span>
            </div>
            <div class="yi-right">
                <div class="yusdeh" v-for="(item,index) in List" :key="index">
                    <span>{{item.number}}</span>
                    <span>{{item.shuiya}}</span>
                </div>

            </div>
        </div>
        <div class="runing-bottom">
            <div class="yi-ridght">
                <div class="yudsdeh" v-for="(mon,index) in tableList" :key="index">
                    <span>{{mon.blech}}</span>
                    <span>{{mon.inof}}</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            List: [
                {
                    number: 500,
                    shuiya: '水压(MPa)',
                },
                {
                    number: 2.6,
                    shuiya: '设计供水规模(5.5万/m³)',
                },
                {
                    number: 0.636,
                    shuiya: '装机流量流量(m³/s)',
                },
                {
                    number: '945',
                    shuiya: '装机功率(kW)',
                },
                {
                    number: 2021.2,
                    shuiya: '建成时间',
                },
                {
                    number: 378,
                    shuiya: '占地面积(m²)',
                },
            ],

            tableList: [
                {
                    blech: '正常',
                    inof: '泵机状态',
                },
                {
                    blech: '正常',
                    inof: '蝶阀状态',
                },
                {
                    blech: '正常',
                    inof: '排气阀',
                },
                {
                    blech: '正常',
                    inof: '出口阀状态',
                },
            ],
        }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 280px;
    // border: 1px solid red;
    .raining {
        width: 100%;
        height: 25px;
        
        // border: 1px solid red;
        background: url('../../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    .pumpStation {
        width: 100%;
        height: 20px;
        // border: 1px solid red;
        margin: 20px 0 10px 10px;
        font-size: 15px;
        line-height: 18px;
        color: #5bd9fe;
    }
    .yilei {
        width: 471px;
        height: 128px;
        background: linear-gradient(90deg, rgba(44, 132, 255, 0.4) 0%, rgba(44, 132, 255, 0.16) 29.01%, rgba(0, 0, 0, 0) 57.42%), linear-gradient(180deg, #1f3e72 0%, #112650 100%);
        mix-blend-mode: normal;
        // opacity: 0.6;
        border-radius: 4px;
        margin-left: 10px;
        display: flex;
        .yi-left {
            width: 120px;
            height: 128px;
            position: relative;
            // border: 1px solid red;
            background: url('../../../../../../../src/assets/images/home/Rectangle 46 (1).png') no-repeat right;
            background-size: 5% 70%;
            span {
                display: block;
            }
            span:nth-child(1) {
                font-size: 28px;
                line-height: 77px;
                text-align: center;
                font-weight: bold;
                color: #5bd9fe;
            }
            span:nth-child(2) {
                font-size: 13px;
                line-height: 1px;
                text-align: center;
                color: #ffffff;
                opacity: 0.4;
            }
        }
        .yi-right {
            width: 400px;
            height: 128px;
            // border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            .yusdeh {
                width: 110px;
                height: 50px;
                margin: 5px 5px 0 5px;
                // border: 1px solid red;
                span {
                    display: block;
                }
                span:nth-child(1) {
                    font-size: 14px;
                    line-height: 25px;
                    text-align: center;
                    color: #ffff;
                }
                span:nth-child(2) {
                    font-size: 12px;
                    line-height: 16px;
                    text-align: center;
                    color: #ffffff;
                    opacity: 0.4;
                }
            }
        }
    }
    .runing-bottom {
        width: 471px;
        height: 68px;
        margin: 10px 0 0 10px;

        background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
        mix-blend-mode: normal;
        // opacity: 0.6;
        border-radius: 4px;
        .yi-ridght {
            width: 470px;
            height: 128px;
            // border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            .yudsdeh {
                width: 100px;
                height: 50px;
                margin: 5px 5px 0 10px;
                // border: 1px solid red;
                span {
                    display: block;
                }
                span:nth-child(1) {
                    font-size: 14px;
                    line-height: 35px;
                    text-align: center;
                    color: #ffff;
                }
                span:nth-child(2) {
                    font-size: 12px;
                    line-height: 16px;
                    text-align: center;
                    color: #ffffff;
                    opacity: 0.4;
                }
            }
            .yudsdeh span:nth-child(1) {
                color: #3e9dff;
            }
            // .yudsdeh:nth-child(2) span:nth-child(1) {
            //     color: #5fec7e;
            // }
            // .yudsdeh:nth-child(3) span:nth-child(1) {
            //     color: #efc920;
            // }
            // .yudsdeh:nth-child(4) span:nth-child(1) {
            //     color: #5fec7e;
            // }
        }
    }
}
</style>
